<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <link rel="shortcut icon" href="__STATIC__/src/common/img/cauliflower-small.png" type="image/x-icon" />
    <link rel="stylesheet" type="text/css"  href="__STATIC__/src/common/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css"  href="__STATIC__/src/common/css/common.css" />
</head>
<body>
{include file="common/header"}
<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div>
                <ul class="default-ul">
                    {volist name="exams" id="exam"}
                        <li class="default-li">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    <h3 class="panel-title">{$exam.exam_name}</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="alert alert-info">
                                        <h5>考试注意事项：</h5>
                                        <span>
                                            {$exam.attention_matters}
                                        </span>
                                        <h5>
                                            监考老师：{$exam.user_name}
                                        </h5>
                                    </div>
                                    <div style="text-align: center;">
                                        {php}
                                            $startTime = strtotime($exam['exam_startTime']);
                                            $now = time();
                                            $ID = $exam['exam_id'] + 124359;
                                            $enterUrl = url("enter?ID=$ID");
                                            if ($exam['status'] == '0') {
                                                if ($now < $startTime) {
                                                    $interval = $startTime - $now;
                                                    echo "<span name='timer' class=\"$interval\" style='font-size: 24px; color: #FF8C69;'></span>";
                                                }else {
                                                    echo "<span class=\" bigger-fontSize \">监考老师未开启考试！</span>";
                                                }
                                            }else if($exam['status'] == '1') {
                                                echo "<a href=\"$enterUrl\" class=\"btn btn-primary bigger-fontSize\">进入考试</a>";
                                            }else if($exam['status'] == '2') {
                                                echo "<span class=\" bigger-fontSize \">考试已结束！</span>";
                                            }
                                        {/php}
                                    </div>
                                </div>
                            </div>
                        </li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC__/src/common/js/jquery-3.2.1.js"></script>
<script src="__STATIC__/src/common/js/bootstrap.js"></script>
<script src="__STATIC__/src/common/js/admin.js"></script>
<script src="__STATIC__/src/common/js/teacher.js"></script>
<script>
let Alarm = function (interval, countFunc, endFunc) {
    this.time = interval; //时间
    this.countFunc = countFunc; //计时函数
    this.endFunc = endFunc; //结束函数
    this.flag = 't' + Date.parse(new Date());
};
Alarm.prototype.start = function () {
    let self = this;
    self.flag = setInterval(function () {
        if (self.time < 0) {
            clearInterval(self.flag);
            self.endFunc();
            console.log('计时结束');
        } else {

            let minute, hour, day, second;
            day = Math.floor(self.time / 60 / 60 / 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 / 24) : Math.floor(self.time / 60 / 60 / 24);
            hour = Math.floor(self.time / 60 / 60 % 24) < 10 ? '0' + Math.floor(self.time / 60 / 60 % 24) : Math.floor(self.time / 60 / 60 % 24);
            minute = Math.floor(self.time / 60 % 60) < 10 ? '0' + Math.floor(self.time / 60 % 60) : Math.floor(self.time / 60 % 60);
            second = Math.floor(self.time % 60) < 10 ? '0' + Math.floor(self.time % 60) : Math.floor(self.time % 60);
            //倒计时执行函数
            self.countFunc(second, minute, hour, day);
            self.time--;

        }
    }, 1000);
};
let timers = document.getElementsByName('timer');
let timerInterval = new Array(timers.length);
for(let i = 0; i < timers.length; i++) {
    timerInterval[i] = new Alarm(parseInt(timers[i].getAttribute('class')),function (second,minute,hour,day) {
        timers[i].innerHTML = day + "天" + hour + "小时" + minute + "分钟" + second + "秒";
    },function () {
        timers[i].innerHTML = "<a class='btn btn-primary bigger-fontSize'>进入考试</a>";
    });
    timerInterval[i].start();
}
</script>
</body>
</html>